import { Button } from 'antd'
import { UpOutlined, DownOutlined,RightOutlined,LeftOutlined } from '@ant-design/icons';
import React, { useEffect, useState } from 'react'
import FetchHelper from '../../../../../../../utils/helper/fetch-helper';

export default function Water_information(props) {

    const { datas1 } = props;

    const [styZk, setStyzk] = useState({
        sty1: {
            right: 460,
            bottom: 30,
        },
        sty2: {
            right: 1,
            bottom: 60,
        },
        icon: <LeftOutlined />
    })
    const [open, setOpen] = useState()
    const [data, setData] = useState()
    const HandOnClick = () => {
        setOpen(!open);
       
    };
    useEffect(() => {
        FetchHelper.getJson(`/admin-api/ybyj/yqjc/list`,{tbr:'水利厅'}).then(resp=>{
            console.log('123',resp)
            console.log('123',resp.rows?.[resp.total-1])
            setData(JSON.parse(resp.rows?.[resp.total-1].xq))
        })
    },[])
    useEffect(() => {
        if (!open) {
            setStyzk(prevState => ({
                ...prevState,
                icon: <RightOutlined /> 
            }));
        } else {
            setStyzk(prevState => ({
                ...prevState,
                icon: <LeftOutlined />
            }));
        }
    },[open])
    useEffect(() => {
        if (datas1) {
           
            setStyzk(prevState => ({
                ...prevState,
                sty1: {
                    right: 460,
                    bottom: 30,
                },
                sty2: {
                    right: 1,
                    bottom: 60,
                },
            }));
        } else {
            
            setStyzk(prevState => ({
                ...prevState,
                sty1: {
                    right: 20,
                    top: 30,
                },
                sty2: {
                    right: 1,
                    top: 60,
                },
            }));
        }
    }, [datas1,setOpen]);

    return (<>
        <div style={{
            position: 'absolute',
            ...styZk.sty1,
        }}><Button onClick={HandOnClick} icon={styZk.icon}>水情实况</Button>
            <div style={{
                position: 'absolute',
                ...styZk.sty2,
                backgroundColor: 'white',
                width: 400,
                //height: 300,
                border: '1px solid black',
                borderRadius: '10px ',
                padding: 5,
                color: 'black',
                display: open ? 'block' : 'none'
            }}>
                <div style={{
                }}>
                    <h3>{data?.title?data?.title:'缺失标题'}</h3>
                    <hr />
                </div>
                <div style={{
                    padding: 5,
                    color: 'black',
                    //fontSize:''
                    overflowWrap: 'break-word',
                }}>
                    {`<${data?.year}> ${data?.content} `}
                </div>
            </div>
        </div>
    </>)
}
